<script setup>
import{storeToRefs} from 'pinia'
import {ref,onMounted} from 'vue'
import { useRoute } from 'vue-router'
import {useCounterStore} from '@/stores/counter'
import { InfoFilled,Sunny,CirclePlusFilled } from '@element-plus/icons-vue'

const aaa = ref(true)
const route = useRoute()
const tipshow =ref(false)
const tipiconshow=ref(false)
const saveiconshow=ref(false)
const store = useCounterStore()
const citycode = route.params.id
const {adcode,weatherall,weathertoday,localweathertoday,optionget,handleSave} =store
const weekdata = ref(["/","周一","周二","周三","周四","周五","周六","周天",])
const {weatherTody,weatherTodylocal,items,echartDays,echartNight,option} = storeToRefs(store)
onMounted( async ()=>{
   await adcode()
   await weatherall(citycode)
   await weathertoday(citycode)
   await localweathertoday()
         optionget()
})

</script>

<template>
    <div class="container">
        <div class="usetip" :class="tipshow ? 'tipactive1' : 'tipactive2'">
                <p class="title">关于</p>
                <p class="artic">这个应用可以用来追踪你选择城市的当前天气</p><br>
                <p class="title"> 如何使用:</p>
                <p class="artic">
                   1.点击搜索框输入你希望追踪的城市<br>
                   2.在搜索结果中选中一个城市，你将获取当地最新的天气<br>
                   3.点击右侧的＋号可以将追踪城市的天气情况保存在首页<br>
                </p><br>
                <p class="title">移除城市:</p>
                <p class="artic">如果你不想在首页关注某个城市,可以通过底部的按钮删除它</p>
                <button  @click="tipshow=false" style="cursor: pointer;">关闭</button>
        </div>
        <div class="top">
            <div class="left">
                <div>
                    <router-link to="/" class="title">
                        <div class="icon"><el-icon><Sunny /></el-icon></div>
                        <div class="tip">新中地天气</div>
                        <div class="city">{{weatherTodylocal.city}}</div>
                    </router-link>
                </div>
                <div class="weather">
                    <div>实时天气：{{weatherTodylocal.weather}}{{weatherTodylocal.temperature}}℃</div>
                    <div>{{weatherTodylocal.winddirection}}风{{weatherTodylocal.windpower}}级</div>
                </div>
            </div>
            <div class="right">
                  <div class="tipicon" @click="tipshow=true" :class="tipiconshow ? 'tipiconactice2' :'tipiconactice1'"
                   @mouseover="tipiconshow=true" @mouseout="tipiconshow=false"> <el-icon><InfoFilled /></el-icon></div>
                  <div class="saveicon" :class="saveiconshow ? 'saveiconactice2' :'saveiconactice1'"
                  @mouseover="saveiconshow=true" @mouseout="saveiconshow=false" @click="handleSave(citycode)"><el-icon><CirclePlusFilled /></el-icon></div>
            </div>
        </div>
        <div class="citytip">你正在预览{{weatherTody.city}}的天气信息<span>,可以通过顶部按钮添加</span></div>
        <div class="line"><hr style="opacity: 0.1;"></div>
        <div class="main">
            <div class="box">
                <div class="citylist">
                   <div>当日气温是：{{weatherTody.temperature}}摄氏度</div>
                   <div>当日天气是：{{weatherTody.weather}}</div>
                   <div>当日风向是：{{weatherTody.winddirection}}风</div>
                   <div>当日风力是：{{weatherTody.windpower}}级</div>
                </div>
                <div class="mainbox">
                    <div class="table">
                        <div class="tablelist" v-for="item in items" :key="item.id">
                           <div>{{weekdata[item.week]}}</div>
                           <div>{{ item.date.slice(5,10) }}</div>
                           <div>{{ item.dayweather }}</div>
                           <div>风力{{item.daypower}}级</div>
                        </div>
                    </div>
                    <div class="echart">
                        <v-chart :option="option"> </v-chart>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<style scoped>
* {
    box-sizing: border-box;
}
.container {
    height: 100vh;
    width: 100vw;
    height: 960px;
    background-color: rgba(0, 102, 138);
}
.container .usetip{
    top:7%;
    left:40%;
    width: 334px;
    height: 299px;
    padding: 20px;
    z-index: 1000;
    position: absolute;
    background-color:aliceblue
}
 .tipactive1{
    opacity: 1;
    transition: all 1.5s;
}
 .tipactive2{
    opacity: 0;
    transition: all 1.5s;
}
.container .citytip{
    padding: 9px 0;
    height: 35px;
    font-size: 16px;
    text-align: center;
    color: aliceblue;
    background-color: rgba(0, 78, 113);
}
.container .line{
position: relative;
top: 173px;
}
.container .usetip .artic{
    font-size: .75rem;
    line-height: 1rem;
}
.container .usetip button{
    margin-top: 15px;
    padding: .5rem 1.5rem;
    cursor: pointer;
    font-size: .75rem;
    color: aliceblue;
    border: none;
    background-color: rgba(0, 102, 138);
}
.container .top {
    width: 100%;
    height: 10%;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-items: center;
    justify-content: space-around;
    box-shadow: 0 4px 16px -4px rgba(12, 12, 12, 0.3);
}

.top .left,.title,.weather{
    gap: 20px;
    display: flex;
    text-decoration: none;
    justify-items: center;
    align-items: center;
}
.title .icon,.tip{
    font-size: 1.5rem;
    color:aliceblue;
}
.title .city{
    font-size: 1.125rem;
    color:aliceblue;
}
.left .weather{
    font-size: .875rem;
    color:aliceblue;
}
.top .right{
    gap: 40px;
    display: flex;
    align-items: center;
    justify-items: center;
    font-size: 35px;
    color: aliceblue;
    cursor: pointer;
}
.tipiconactice1{
    opacity: 1;
    transition: 1.5s;
}
.tipiconactice2{
    opacity: 0.06;
    transition: 1s;
}
.saveiconactice1{
    opacity: 1;
    transition: 1.5s;
}
.saveiconactice2{
    opacity: 0.06;
    transition: 1s;
}
.main .box{
    width: 65%;
    height: 400px;
    margin: 0 auto;
    margin-top: 10px;
}
.box .citylist {
    margin: 10px 0;
    text-align: center;
    line-height: 40px;
    color: aliceblue;
}
.box .mainbox{
    height: 400px;
    margin-top: 10px;
    padding: 3rem 9rem;
    background-color: rgba(0, 78, 113);
}
.box .mainbox .table{
    display: flex;
    text-align: center;
    color: aliceblue;
    justify-content: space-between;
}
.mainbox .table .tablelist{
    line-height: 40px
}
.mainbox .echart{
    padding: 0;
    margin-left:-90px;
    margin-top:40px;
    width: 1100px;
    height:180px;
}
</style>